<script setup lang="ts">
  import { computed, ref, unref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { showToast } from 'vant';
  import API_BANNER from '@/apis/banner'
  const route = useRoute();
  const router = useRouter();
  onMounted(() => {

    getDetail()
  })
  const detailData = ref({})
  const getDetail = async () => {
    let res = await API_BANNER.serviceDetail({
      id: route.query.id
    })
    if (res.code == 1) {
      detailData.value = res.data
    }
  }
</script>

<template>
  <div class="container">
    <div class="service_tit flex al-center ">
      <div style="background-color: #3060cd;width: 100px;height: 100px;border-radius: 10px;margin-right: 10px;">
        <img :src="detailData.image" alt="" style="width: 100%;height: 100%;">
      </div>
      <div class="ri">
        <h4 style="margin: 10px 0;font-size: 24px;">{{detailData.title}}</h4>
        <div style="color: #a7a7a7;">
          <div v-for="i in detailData.label_text" :key="i">{{i}}</div>
        </div>
      </div>
    </div>
    <br>
    <br>
    <div>
      <div class="leTit">
        公司介绍
      </div>
      <div v-html="detailData.introduce">

      </div>
    </div>
    <getBack></getBack>
  </div>
</template>

<style lang="less" scoped>
  @import '@/styles/mixins/login.less';

  .container {
    padding: 20px;
    background: url("@/assets/img/serice.jpg")no-repeat;
    background-size: 100% 100%;

    .leTit {
      display: inline-block;
      background-color: #4d90fe;
      border-radius: 30px;
      padding: 4px 12px;
      color: #fff;
      margin-bottom: 10px;
    }

    .service_tit {
      padding: 18px;
      background-color: #fff;
      border-radius: 12px;
    }
  }
</style>